﻿@page "/en/5.8/modules/plg-dashboard"
@{
    Layout = "_ArticleLayout";
    ViewBag.Title = "Dashboard Plugin";
}

@section Styles {
    <link href="~/lib/prismjs/prism.css" rel="stylesheet" />
}

@section Scripts {
    <script src="~/lib/prismjs/prism.js"></script>
}

<nav class="doc-toc">
    <div class="h6">On this page</div>
    <hr>
    <ul>
        <li><a href="#overview">Overview</a></li>
        <li><a href="#installation">Installation</a></li>
        <li>
            <a href="#configuring">Configuring</a>
            <ul>
                <li><a href="#specifying-dashboards">Specifying Dashboards</a></li>
                <li><a href="#file-structure">Dashboard File Structure</a></li>
            </ul>
        </li>
    </ul>
</nav>

<div class="doc-content">
    <h1>Dashboard Plugin</h1>
    <h2 id="overview">Overview</h2>
    <p>Dashboard Plugin displays useful widgets on dashboards: charts, current data and arbitrary frames, for example, CCTV camera stream. Settings of each dashboard allow to specify column count and widget aspect ratio.</p>

    <h2 id="installation">Installation</h2>
    <p>First you need to perform <a href="../installation-and-run/module-installation#plugins">the general sequence of installing plugins</a>, and then perform several additional actions:</p>
    <ol>
        <li>Go to <em>Main Menu &gt; Registration &gt; Dashboard</em>.</li>
        <li>Register the plugin using the hyperlinks on the page.</li>
        <li>Add registration key to the project by downloading the Webstation settings using the Administrator application.</li>
    </ol>

    <h2 id="configuring">Configuring</h2>

    <h3 id="specifying-dashboards">Specifying Dashboards</h3>

    <p>Configuration of each dashboard is stored in a separate XML file. The dashboard example, DashboardExample1.xml, is included in the plugin installation package. Dashboard files can be located in the interface directory, or in the Webstation storage directory. The 1st option is preferred.</p>

    <p>In order to display the dashboard links in the explorer tree of Webstation, perform the following settings in the project:</p>

    <ol>
        <li>Create and edit a dashboard file in the interface directory.</li>
        <li>Specify the dashboard path in the <em>Interface</em> table of the configuration database.</li>
    </ol>

    <figure class="figure">
        <img src="plg-dashboard-files/dashboard_itf_file_en.png" class="figure-img img-fluid" alt="Dashboard file" />
    </figure>

    <figure class="figure">
        <img src="plg-dashboard-files/dashboard_itf_tbl_en.png" class="figure-img img-fluid" alt="Editing the Interface table" />
    </figure>

    <p>The @@DashboardView path suffix indicates the type of view. The access rights to dashboards are configured using the <em>Rights</em> table of the configuration databse. It is similar to editing the rights to table views and schemes.</p>

    <p>In addition, dashboard files can be located in the storage directory of Webstation. In this case, click the <em>Dashboards</em> item of the Webstation main menu to display the list of available dashboards. Examples of the dashboard locations in the storage:</p>

    <p>
        ScadaWeb\storage\allusers\Dashboard\ - dashboards available to all users;<br />
        ScadaWeb\storage\myuser\Dashboard\ - dashboards available to MyUser.
    </p>

    <h3 id="file-structure">Dashboard File Structure</h3>

    <p>Consider the contents of a dashboard configuration file:</p>

    <pre><code class="language-xml">&lt;?xml version="1.0" encoding="utf-8" ?&gt;
&lt;DashboardConfig&gt;
  &lt;DashboardOptions&gt;
    &lt;Name&gt;Dashboard Example 1&lt;/Name&gt;
    &lt;ColumnCount&gt;2&lt;/ColumnCount&gt;
    &lt;AspectRatio&gt;1.33&lt;/AspectRatio&gt;
  &lt;/DashboardOptions&gt;
  &lt;Widgets&gt;
    &lt;Widget type="Chart" cnlNums="101,102" viewIDs="2,2" period="2" /&gt;
    &lt;Widget type="Chart" cnlNums="101,103" viewIDs="2,2" mode="fixed" period="2" title="Sample Chart" config="PlgChartPro.xml" /&gt;
    &lt;Widget type="CurData" cnlNums="101,102,103,104,105,106,107,115" viewIDs="2,2,2,2,2,2,2,2" title="Sample Data" /&gt;
    &lt;Widget type="View" viewID="2" /&gt;
    &lt;Widget type="CustomUrl" url="https://www.youtube.com/embed/EEIk7gwjgIM" /&gt;
  &lt;/Widgets&gt;
&lt;/DashboardConfig&gt;</code></pre>

    <p>
        The <strong>DashboardOptions</strong> section contains common dashboard parameters:<br />
        Name - dashboard name,<br />
        ColumnCount - number of columns from 1 to 4 (widgets are shown in a single column anyway on small screens of mobiles),<br />
        AspectRatio - ratio of widget width to its height.
    </p>

    <p>The <strong>Widgets</strong> section contains a list of widgets that are displayed on a dashboard. Number of widgets is arbitrary. However, too many widgets on the same dashboard can reduce the performance of the web application.</p>

    <p>
        Widgets of the following types are supported:<br />
        Chart - a chart of the specified input channels,<br />
        CurData - a table contains current data of the specified input channels,<br />
        View - a view having the specified ID,<br />
        CustomUrl - custom web page.
    </p>

    <p>Configuration of widgets of the Chart and CurData types must define input channel numbers and also identifiers of the views that include these input channels. View IDs are required for user access rights validation.</p>
</div>
